import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'

const Step1 = (props) => {
  const {queryInvite, join, inviteId, inviteIdChange, tip = '', querySuccess} = props
  const inviteCn = classnames({'buy-row': true, hide: !(tip === '')})
  const tipCn = classnames({'buy-row': true, hide: tip === ''})
  return <div className="modal-wrapper">
    <div className="buy-row first group-modal-content">
      <div className="group-modal-content-row v-center">
        <span className="group-id-text">玩法ID: </span><input type="text" className="group-name-ipt" placeholder="请输入玩法ID" value={inviteId} onChange={inviteIdChange}></input>
      </div>      
      {
        tip === '' ? null : <div className="orange">
          <span>{tip}</span>
        </div>
      }
    </div>
    <div className="bottom-btn">
      {
        querySuccess ? <img onClick={join} className="group-smaller-btn" src="img/mall/dialog/confirm.png" alt=""></img> :
        <img className="group-smaller-btn" src="img/groupNew/query-yellow.png" alt="" onClick={queryInvite}></img>
      }
    </div>
  </div>
  // return <div>
  //   <div className="buy-row first clearfix">
  //     <input type="text" className="invite-id larger" value={inviteId} onChange={inviteIdChange} id="rule-ipt-new" placeholder=""></input>
  //     {/* <div className="invite-btn">
  //       <img className="full-width" src="img/mall/dialog/query.png" alt="" onClick={queryInvite}></img>
  //     </div> */}
  //   </div>
  //   <div className={tipCn}>
  //     <span>{tip}</span>
  //   </div>
  //   <div className="bottom-btn">
  //     {/* <img onClick={join} className="full-width" src="img/group/confirm-green.png" alt=""></img>       */}
  //     {
  //       querySuccess ? <img onClick={join} className="full-width" src="img/group/confirm-green.png" alt=""></img> :
  //       <img className="full-width" src="img/mall/dialog/query.png" alt="" onClick={queryInvite}></img>
  //     }
  //   </div>
  // </div>
}

const Step2 = (props) => {
  const {tip, confirm} = props
  return <div>
  <div className="buy-row first">
  </div>
  <div className="buy-row group-conent-full">
    {tip}
  </div>
  <div className="bottom-btn">
    <img className="confirm" onClick={confirm} src="img/mall/dialog/confirm.png" alt=""></img>
  </div>
</div> 
}

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
  }
}

class JoinRule extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      step: 1,
      inviteId: '',
      tip: '',
      querySuccess: false,
      serverSideGroup: undefined
    }
  }
  
  public componentDidMount() {
  }

  public focusIpt() {
    // if (document.getElementById('rule-ipt')) {
    //   document.getElementById('rule-ipt').focus()
    // }
  }

  public queryInvite() {
    if (this.state.inviteId.length === 0) {
      this.setState({tip: '请输入玩法ID'})
    } else {
      this.setState({tip: ''})
      const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/${this.state.inviteId}`
      const opt = { method: 'GET' }
      fetchJson(url, opt).then(data => {
        console.log(data);
        if (data.result) {
          this.setState({tip: data.message, querySuccess: false})
          return 
        }
        this.setState({tip: '玩法名称: ' + data.data.crowdName, querySuccess: true, serverSideGroup: data.data})
      })
    }
  }

  public join() {
    if (!this.state.querySuccess) {
      this.setState({tip: '请先查询俱乐部'})
      return 
    }
    const send = {
      crowdId: this.state.serverSideGroup.id,
      applyId: this.props.userInfo.uid
    }
    console.log('send', send);
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}`
    const opt = { method: 'POST', body: JSON.stringify(send) }
    fetchJson(url, opt).then(data => {
      if (data.result) {
        this.setState({tip: '申请失败, ' + data.message, step: 2})
        return
      }
      this.setState({tip: data.message, step: 2})
    })
  }

  
  public handleRuleIdChange(e) {
    this.setState({inviteId: e.target.value, querySuccess: false})
  }

  confirm() {
    console.log('confirm!!')
  }

  public render() {
    const {close, item} = this.props
    const {step, inviteId, tip, orderTip, querySuccess} = this.state
    return <div className="dialog-block has-mask full" onClick={this.focusIpt}>
      <div className="group-content content">
        <div className="full-width title-wrapper">
          <img className="title big" src="img/group/group-join-text.png" alt=""/>
          <img onClick={close} className="close" src="img/mall/dialog/close.png" alt=""/>
        </div>
        <div className="modal-wrapper">
          {step === 1 ? <Step1 item={item} inviteId={inviteId} tip={tip}
            queryInvite={this.queryInvite.bind(this)}
            join={this.join.bind(this)}
            querySuccess={querySuccess}
            inviteIdChange={this.handleRuleIdChange.bind(this)}></Step1> : null}
          {step === 2 ? <Step2 inviteId={inviteId}
           tip={tip}
           back={() => this.setState({step: 1, orderTip: ''})}
           confirm={close}></Step2> : null}
        </div>
      </div>
    </div>
  }

}
export default connect(mapStateToProps, mapDispatchToProps)(JoinRule)